<template>
  <div class="banxin">
      <el-breadcrumb separator="/" style="padding:20px 0">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <!-- <el-breadcrumb-item><a href="/">文章列表</a></el-breadcrumb-item> -->
  <el-breadcrumb-item>文章列表</el-breadcrumb-item>
  <!-- <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
</el-breadcrumb>
      <el-table :data="tableData" >
        <el-table-column prop="author" label="作者" width="200">
        </el-table-column>
        <el-table-column  label="文章标题" width="600">
          <template slot-scope="scope">
          <nuxt-link :to="'/article?id='+scope.row.id" style="margin-left: 10px">{{ scope.row.title }}</nuxt-link>
        </template>
        </el-table-column>
        <el-table-column prop="date" label="日期">
        </el-table-column>
      </el-table>
      

  </div>
</template>

<script>
import {ArticleListApi  } from '../../request/api'
import moment from 'moment'
export default {
  
  data() {
    return {
      tableData: [{
        author: '爱仕达',
        title: '人们日报众生',
        date: '2016-05-02'
      }, ]
    }
  },
  async asyncData(){
        // 使用await来实习同步请求
        let result = await ArticleListApi()
          console.log(result)

        if(result.errCode == 0){
          result.data.forEach(element => {
            element.date = moment(element.date).startOf('day').fromNow()
          });
            return{
              tableData:result.data
            }
        }
        
    },
}
</script>

<style>
</style>